<template>
    <div id="gmmp">
        <router-link to="/">
            <i class="fa fa-reply back"></i>
        </router-link>
        <div id="one">
            <div class="imgcode p0">
                <div style="font-size: .36rem;color: #fff;">
                    <i class="fa fa-caret-right " aria-hidden="true" style="color: white;font-size: .5rem;"></i>
                    您当前所在景区
                </div>
                <div style="font-size: .36rem;color: #fff;">
                    <i class="fa fa-map-marker" aria-hidden="true" style="color: #C94C31;font-size: .5rem;"></i>
                    {{jds[0] + '景区'}}
                </div>
                <div style="font-size: .24rem;color: #fff;" class="mid">
                    <img :src="getQrCode(getBH[jds[0]])" alt="">
                    <div class="black">扫码可购票</div>
                </div>
            </div>
        </div>
        <div class="imgcode2 p1">
            <img :src="getQrCode(getBH.两点联票)" alt="">
            <span style="color: #fff;font-size: .20rem;">扫码购票</span>
            <i class="fa fa-caret-down " aria-hidden="true" style="color: white;font-size: .5rem;"></i>
            <span style="color: #fff;font-size: .3rem;">{{jds[1]}}</span>
        </div>
        <div class="imgcode2 p2">
            <img :src="getQrCode(getBH['三大点+梦幻谷'])" alt="">
            <span style="color: #fff;font-size: .20rem;">扫码购票</span>
            <i class="fa fa-caret-down " aria-hidden="true" style="color: white;font-size: .5rem;"></i>
            <span style="color: #fff;font-size: .36rem;">{{jds[2]}}</span>
        </div>
        <div class="imgcode2 p3">
            <img :src="getQrCode(getBH['五大点+梦幻谷'])" alt="">
            <span style="color: #fff;font-size: .20rem;">扫码购票</span>
            <i class="fa fa-caret-down " aria-hidden="true" style="color: white;font-size: .5rem;"></i>
            <span style="color: #fff;font-size: .36rem;">{{jds[3]}}</span>
        </div>
    </div>
</template>

<script>
    import jrCode from 'jr-qrcode/dist/jr-qrcode'

    export default {
        name: "Gmmp",
        data() {
            return {
                jqurl: {
                    qwg: ['秦王宫', '01'],
                    qmsht: ['清明上河图', '02'],
                    gzjxgj: ['广州街香港街', '03'],
                    mqgy: ['明清宫苑', '04'],
                    mhg: ['梦幻谷', '16'],
                },
                uid: {
                    qwg: '746573745F31',
                    mhg: '746573745F32',
                    mqgy: '746573745F33',
                    qmsht: '746573745F34',
                    kyzx: '746573745F35',
                },
                nowJq: '',
                jds: ['两点联票', '三大点+梦幻谷', '五大点+梦幻谷'],
                getBH: {
                    '秦王宫': '01',
                    '清明上河图': '02',
                    '广州街香港街': '03',
                    '明清宫苑': '04',
                    '梦幻谷': '16',
                    '两点联票': '0161Y',
                    '三大点+梦幻谷': '57',
                    '五大点+梦幻谷': '35',
                    '五点联票': '34',
                },
            }
        },
        mounted() {
            this.nowJq = this.jqurl[this.getUrlParam('jq')][0];
            this.jds.unshift(this.nowJq);
        },
        computed: {},
        methods: {
            getUrlParam: function (name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.trim().substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                else return "";
            },
            formatDate: function (date) {
                const formatNumber = n => {
                    n = n.toString();
                    return n[1] ? n : "0" + n;
                };
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                return (
                    [year, month, day].map(formatNumber).join("-")

                );
            },
            getQrCode: function (item) {
                let date = this.formatDate(new Date());
                return jrCode.getQrBase64(`http://e.hengdianworld.com/yd_mp_s1.aspx?pro=${item}&comedate=${date}&uid=${this.uid[this.getUrlParam('jq')]}`, {
                    width: 120,
                    height: 120
                })
            }
        },
        components: {}
    }
</script>

<style scoped>
    #gmmp {
        width: 100%;
        height: 100%;
        background: url("../imgs/bg.jpg") no-repeat center / cover;
        position: relative;
    }

    .back {
        padding-left: .3rem;
        padding-top: .3rem;
    }

    .imgcode {
        position: absolute;
        top: 5.63rem;
        height: 1.57rem;
    }

    .p0 {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        width: 100%;
    }

    .imgcode img {
        width: 1.2rem;
    }

    .imgcode2 img {
        width: 1.2rem;
    }

    .imgcode2 {
        width: 2.52rem;
        height: 2.68rem;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .p1 {
        left: 7.89rem;
        top: 9.25rem;
    }

    .p2 {
        left: 7.89rem;
        top: 12.38rem;
    }

    .p3 {
        left: 7.89rem;
        top: 15.41rem;
    }

    .black {
        padding: .1rem .2rem;
        background: #000;
        border-radius: .5rem;
        font-size: .24rem;
        text-align: center;
    }

    .mid {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
</style>
